<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta name="author" content="王劲翔" />
		<title>我的</title>
		<link rel="stylesheet" href="./css/home.css" />
		<link rel="stylesheet" href="./iconfont/iconfont.css" />
		<script src="./js/lib/alloyFinger.js"></script>
		<script src="./js/flexible.js"></script>
	</head>
	<body>
		<div class="background"></div>

		<!-- 顶部动画 -->
		<div class="topActive">
			<img src="./images/货车.png" alt="" />
		</div>

		<!-- 用户信息区 -->
		<div class="userInfo">
			<!-- 头像 -->
			<img src="./images/img-头像@2x.png" alt="" />
			<!-- 姓名 -->
			<h2>李明</h2>
			<!-- 司机编号 -->
			<p class="num">司机编号：<span>12345678</span></p>
			<!-- 手机号 -->
			<p class="phoneNum">手机号：<span>123 0000 0000</span></p>
		</div>
		<!-- 本月任务区 -->
		<div class="monthTasks wrapper">
			<!-- 本月任务标题 -->
			<h3>- 本月任务 -</h3>
			<!-- 任务信息展示 -->
			<ul class="flexCenter">
				<!-- 任务总量 -->
				<li>
					<p class="num">18</p>
					<p class="text">任务总量</p>
				</li>
				<!-- 完成任务量 -->
				<li>
					<p class="num">16</p>
					<p class="text">完成任务量</p>
				</li>
				<!-- 运输里程 -->
				<li>
					<p class="num">3987</p>
					<p class="text">运输里程(km)</p>
				</li>
			</ul>
		</div>
		<!-- 选项区 -->
		<div class="option wrapper">
			<ul>
				<!-- 车辆信息 -->
				<li>
					<a class="car" href="javascript:;">
						<p>车辆信息</p>
						<span class="iconfont icon-xiangyou1"></span>
					</a>
				</li>
				<!-- 任务数据 -->
				<li>
					<a class="mission" href="javascript:;">
						<p>任务数据</p>
						<span class="iconfont icon-xiangyou1"></span>
					</a>
				</li>
				<!-- 系统设置 -->
				<li>
					<a class="systemSet" href="javascript:;">
						<p>系统设置</p>
						<span class="iconfont icon-xiangyou1"></span>
					</a>
				</li>
			</ul>
		</div>

		<!-- 底栏 -->
		<div class="bottomStyle">
			<!-- 任务 -->
			<div class="tesk">
				<a id="teskBtn" href="javascript:;">
					<span class="iconfont icon-xietongrenwu"></span>
					<p>任务</p>
				</a>
			</div>
			<!-- 消息 -->
			<div class="information">
				<a id="informationBtn" href="javascript:;">
					<span class="iconfont icon-btn_mess_nor"></span>
					<p>消息</p>
				</a>
			</div>
			<!-- 我的 -->
			<div class="mine">
				<a class="redSel" id="mineBtn" href="javascript:;">
					<span class="iconfont icon-btn_mine_nor"></span>
					<p>我的</p>
				</a>
			</div>
		</div>
		<script type="module" src="./js/home.js"></script>
	</body>
</html>
